<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="日期" prop="dateInfo">
        <el-date-picker clearable v-model="queryParams.dateInfo" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择日期" :default-value="getDefaultDate()">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="机构ID" prop="infoId">
        <el-input v-model="queryParams.infoId" placeholder="请输入机构ID" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="机构名称" prop="infoName">
        <el-input v-model="queryParams.infoName" placeholder="请输入机构名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="dataCountList">
      <el-table-column label="日期" align="center" prop="dateInfo" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.dateInfo, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="机构信息" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.infoId }}--{{ scope.row.infoName }}
        </template>
      </el-table-column>

      <!-- 撞库数量 -->
      <el-table-column label="撞库数量" align="center">
        <template slot-scope="scope">
          <div v-show="!isMobile" style="margin-bottom: 8px; display: flex; align-items: center;">
            <span style="margin-right: 8px;">总:</span>
            <el-progress :percentage="computePercentage(scope.row.checkNumber, scope.row.checkNumber)" color="#409EFF"
                         status="success" style="flex-grow: 1;"></el-progress>
            <span style="color: red; margin-left: 8px; font-weight: bold;">{{ scope.row.checkNumber }}</span>
          </div>
          <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" v-show="!isMobile"
               style="margin-bottom: 8px; display: flex; align-items: center;">
            <span style="margin-right: 8px;">{{ type }}: </span>
            <el-progress :percentage="computePercentage(scope.row[`checkNumber${type}`], scope.row.checkNumber)"
                         :color="getRateColor(computePercentage(scope.row[`checkNumber${type}`], scope.row.checkNumber))"
                         status="success" style="flex-grow: 1;"></el-progress>
            <span style="color: green; font-weight: bold;">{{ scope.row[`checkNumber${type}`] }}</span>
          </div>
          <div v-show="isMobile">
            <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" style="margin-bottom: 8px;">
              <span style="color: green; font-weight: bold;">{{ scope.row[`checkNumber${type}`] }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- 撞库成功数量 -->
      <el-table-column label="撞库成功" align="center">
        <template slot-scope="scope">
          <div v-show="!isMobile" style="margin-bottom: 8px; display: flex; align-items: center;">
            <el-progress :percentage="computePercentage(scope.row.checkSuccessNumber, scope.row.checkSuccessNumber)"
                         color="#409EFF" status="success" style="flex-grow: 1;"></el-progress>
            <span style="color: red; margin-left: 8px; font-weight: bold;">{{ scope.row.checkSuccessNumber }}</span>
          </div>

          <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" v-show="!isMobile"
               style="margin-bottom: 8px; display: flex; align-items: center;">
            <el-progress
              :percentage="computePercentage(scope.row[`checkSuccessNumber${type}`], scope.row.checkSuccessNumber)"
              :color="getRateColor(computePercentage(scope.row[`checkSuccessNumber${type}`], scope.row.checkSuccessNumber))"
              status="success" style="flex-grow: 1;"></el-progress>

            <span style="color: green; font-weight: bold;">{{ scope.row[`checkSuccessNumber${type}`] }}</span>
          </div>

          <div v-show="isMobile">
            <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" style="margin-bottom: 8px;">
              <span style="color: green; font-weight: bold;">{{ scope.row[`checkSuccessNumber${type}`] }}</span>
            </div>
          </div>
        </template>
      </el-table-column>




      <el-table-column label="撞库成功率" align="center">
        <template slot-scope="scope">
          <!-- 显示总的进度条和数值 -->
          <div v-show="!isMobile" style="margin-bottom: 8px; display: flex; align-items: center;">
            <el-progress :percentage="scope.row.checkSuccessRate" color="#409EFF" status="success"
                         style="flex-grow: 1;"></el-progress>
            <span style="margin-left: 8px; color: red; font-weight: bold;">{{ scope.row.checkSuccessRate.toFixed(2)
              }}%</span>
          </div>

          <!-- 显示每个类型的进度条和数值，不显示类型名称 -->
          <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" v-show="!isMobile"
               style="margin-bottom: 8px; display: flex; align-items: center;">
            <el-progress :percentage="scope.row[`checkSuccessRate${type}`]"
                         :color="getRateColor(scope.row[`checkSuccessRate${type}`])" status="success"
                         style="flex-grow: 1;"></el-progress>
            <span style="margin-left: 8px; color: red; font-weight: bold;">{{
                scope.row[`checkSuccessRate${type}`].toFixed(2) }}%</span>
          </div>

          <!-- 移动端显示，每个类型的进度条和数值，不显示类型名称 -->
          <div v-show="isMobile">
            <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" style="margin-bottom: 8px;">
              <span style="color: red; font-weight: bold;">{{ scope.row[`checkSuccessRate${type}`].toFixed(2) }}%</span>
            </div>
          </div>
        </template>
      </el-table-column>






      <!-- 注册数量 -->
      <el-table-column label="注册数量" align="center">
        <template slot-scope="scope">
          <!-- 显示总的进度条和数值 -->
          <div v-show="!isMobile" style="margin-bottom: 8px; display: flex; align-items: center;">
            <el-progress :percentage="computePercentage(scope.row.registerNumber, scope.row.registerNumber)"
                         color="#409EFF" status="success" style="flex-grow: 1;"></el-progress>
            <span style="margin-left: 8px; color: red; font-weight: bold;">{{ scope.row.registerNumber }}</span>
          </div>

          <!-- 显示每个类型的进度条和数值，不显示类型名称 -->
          <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" v-show="!isMobile"
               style="margin-bottom: 8px; display: flex; align-items: center;">
            <el-progress :percentage="computePercentage(scope.row[`registerNumber${type}`], scope.row.registerNumber)"
                         :color="getRateColor(computePercentage(scope.row[`registerNumber${type}`], scope.row.registerNumber))"
                         status="success" style="flex-grow: 1;"></el-progress>
            <span style="margin-left: 8px; color: red; font-weight: bold;">{{ scope.row[`registerNumber${type}`]
              }}</span>
          </div>

          <!-- 移动端显示，每个类型的进度条和数值，不显示类型名称 -->
          <div v-show="isMobile">
            <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" style="margin-bottom: 8px;">
              <span style="color: red; font-weight: bold;">{{ scope.row[`registerNumber${type}`] }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- 注册数量 -->
      <el-table-column label="注册率" align="center">
        <template slot-scope="scope">
          <!-- 显示总的进度条和数值 -->
          <div v-show="!isMobile" style="margin-bottom: 8px; display: flex; align-items: center;">
            <el-progress :percentage="computePercentage(  scope.row.registerCheckRate, scope.row.registerNumber)"
                         color="#409EFF" status="success" style="flex-grow: 1;"></el-progress>
            <span style="margin-left: 8px; color: red; font-weight: bold;">{{ scope.row.registerCheckRate.toFixed(2) }}%</span>
          </div>

          <!-- 显示每个类型的进度条和数值，不显示类型名称 -->
          <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" v-show="!isMobile"
               style="margin-bottom: 8px; display: flex; align-items: center;">
            <el-progress :percentage="computePercentage(scope.row[`registerNumber${type}`], scope.row.registerNumber)"
                         :color="getRateColor(computePercentage(scope.row[`registerNumber${type}`], scope.row.registerNumber))"
                         status="success" style="flex-grow: 1;"></el-progress>
            <span style="margin-left: 8px; color: red; font-weight: bold;">{{ scope.row[`registerCheckRate${type}`].toFixed(2) }}%
              </span>
          </div>

          <!-- 移动端显示，每个类型的进度条和数值，不显示类型名称 -->
          <div v-show="isMobile">
            <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" style="margin-bottom: 8px;">
              <span style="color: red; font-weight: bold;">{{scope.row[`registerCheckRate${type}`].toFixed(2) }}%</span>
            </div>
          </div>
        </template>
      </el-table-column>


      <!-- 注册成功数量 -->
      <el-table-column label="注册成功" align="center">
        <template slot-scope="scope">
          <!-- 显示总的进度条和数值 -->
          <div v-show="!isMobile" style="margin-bottom: 8px; display: flex; align-items: center;">
            <el-progress
              :percentage="computePercentage(scope.row.registerSuccessNumber, scope.row.registerSuccessNumber)"
              color="#409EFF" status="success" style="flex-grow: 1;"></el-progress>
            <span style="margin-left: 8px; color: red; font-weight: bold;">{{ scope.row.registerSuccessNumber }}</span>
          </div>

          <!-- 显示每个类型的进度条和数值，不显示类型名称 -->
          <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" v-show="!isMobile"
               style="margin-bottom: 8px; display: flex; align-items: center;">
            <el-progress
              :percentage="computePercentage(scope.row[`registerSuccessNumber${type}`], scope.row.registerSuccessNumber)"
              :color="getRateColor(computePercentage(scope.row[`registerSuccessNumber${type}`], scope.row.registerSuccessNumber))"
              status="success" style="flex-grow: 1;"></el-progress>
            <span style="margin-left: 8px; color: red; font-weight: bold;">{{ scope.row[`registerSuccessNumber${type}`]
              }}</span>
          </div>

          <!-- 移动端显示，每个类型的进度条和数值，不显示类型名称 -->
          <div v-show="isMobile">
            <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" style="margin-bottom: 8px;">
              <span style="color: red; font-weight: bold;">{{ scope.row[`registerSuccessNumber${type}`] }}</span>
            </div>
          </div>
        </template>
      </el-table-column>

      <!-- 进件成功率 -->
      <el-table-column label="进件成功率" align="center">
        <template slot-scope="scope">
          <!-- 显示总的进度条和数值 -->
          <div v-show="!isMobile" style="margin-bottom: 8px; display: flex; align-items: center;">
            <el-progress :percentage="scope.row.registerSuccessRate" color="#409EFF" status="success"
                         style="flex-grow: 1;"></el-progress>
            <span style="margin-left: 8px; color: red; font-weight: bold;">{{ scope.row.registerSuccessRate.toFixed(2)
              }}%</span>
          </div>

          <!-- 显示每个类型的进度条和数值，不显示类型名称 -->
          <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" v-show="!isMobile"
               style="margin-bottom: 8px; display: flex; align-items: center;">
            <el-progress :percentage="scope.row[`registerSuccessRate${type}`]"
                         :color="getRateColor(scope.row[`registerSuccessRate${type}`])" status="success"
                         style="flex-grow: 1;"></el-progress>
            <span style="margin-left: 8px; color: red; font-weight: bold;">{{
                scope.row[`registerSuccessRate${type}`].toFixed(2) }}%</span>
          </div>

          <!-- 移动端显示，每个类型的进度条和数值，不显示类型名称 -->
          <div v-show="isMobile">
            <div v-for="type in ['App', 'H5','Mini', 'Apib', 'Apis']" :key="type" style="margin-bottom: 8px;">
              <span style="color: red; font-weight: bold;">{{ scope.row[`registerSuccessRate${type}`].toFixed(2)
                }}%</span>
            </div>
          </div>
        </template>
      </el-table-column>



    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList" />

  </div>
</template>



<script>
import { listDataCount, getDataCount, delDataCount, addDataCount, updateDataCount } from "@/api/merchant/dataCount";
import {string} from "postcss-selector-parser";

export default {
  name: "DataCount",
  data() {
    return {
      // 遮罩层
      loading: true,
      isMobile: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商户推送结果统计表格数据
      dataCountList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateInfo: this.getDefaultDate(),
        infoId: null,
        infoName: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        dateInfo: [
          { required: true, message: "日期不能为空", trigger: "blur" }
        ],
        infoId: [
          { required: true, message: "机构ID不能为空", trigger: "blur" }
        ],
        infoName: [
          { required: true, message: "机构名称不能为空", trigger: "blur" }
        ],
        checkNumber: [
          { required: true, message: "撞库数量不能为空", trigger: "blur" }
        ],
        checkSuccessNumber: [
          { required: true, message: "撞库成功不能为空", trigger: "blur" }
        ],
        registerNumber: [
          { required: true, message: "注册数量不能为空", trigger: "blur" }
        ],
        registerSuccessNumber: [
          { required: true, message: "注册成功不能为空", trigger: "blur" }
        ],
        createTime: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ],
      }
    };
  },
  mounted() {
    this.checkMobile();
    window.addEventListener('resize', this.checkMobile);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkMobile);
  },
  created() {
    this.getList();
  },
  methods: {
    string,
    checkMobile() {
      this.isMobile = window.innerWidth <= 768; // 768px 以下为手机端
    },
    /** 查询商户推送结果统计列表 */
    getList() {
      this.loading = true;
      listDataCount(this.queryParams).then(response => {
        this.dataCountList = response.rows.map(row => {
          // 计算撞库成功率
          row.checkSuccessRate = this.computeSuccessRate(row.checkSuccessNumber, row.checkNumber);

          // 计算进件成功率
          row.registerSuccessRate = this.computeSuccessRate(row.registerSuccessNumber, row.registerNumber);
          //计算注册率
          row.registerCheckRate = this.computeSuccessRate(row.registerNumber, row.checkSuccessNumber);
          // 计算每种类型的撞库成功率
          ['App', 'H5', 'Apib', 'Apis','Mini'].forEach(type => {
            row[`checkSuccessRate${type}`] = this.computeSuccessRate(row[`checkSuccessNumber${type}`], row[`checkNumber${type}`]);
          });

          // 计算每种类型的进件成功率
          ['App', 'H5', 'Apib', 'Apis','Mini'].forEach(type => {
            row[`registerSuccessRate${type}`] = this.computeSuccessRate(row[`registerSuccessNumber${type}`], row[`registerNumber${type}`]);
          });
          // 计算每种类型的进件成功率
          ['App', 'H5', 'Apib', 'Apis','Mini'].forEach(type => {
            row[`registerCheckRate${type}`] = this.computeSuccessRate(row[`registerNumber${type}`], row[`checkSuccessNumber${type}`]);
          });
          return row;
        });
        this.total = response.total;
        this.loading = false;
      });
    },
    // 计算成功率的通用函数
    computeSuccessRate(successNumber, totalNumber) {
      if (totalNumber && totalNumber > 0) {
        return ((successNumber || 0) / totalNumber) * 100;
      }
      return 0;
    },
    computePercentage(value, total) {
      if (!total || total === 0) return 0;
      let percentage = (value / total) * 100;
      percentage = Math.max(0, Math.min(percentage, 100));
      return parseFloat(percentage.toFixed(2));
    }

    ,
    // 根据成功率动态设置颜色
    getRateColor(rate) {
      if (rate > 80) return '#67C23A';
      if (rate > 50) return '#E6A23C';
      return '#F56C6C';
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        dateInfo: null,
        infoId: null,
        infoName: null,
        checkNumber: null,
        checkSuccessNumber: null,
        registerNumber: null,
        registerSuccessNumber: null,
        createTime: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    getDefaultDate() {
      // 获取当天日期，并以 yyyy-MM-dd 格式返回
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateDataCount(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDataCount(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

  }
};
</script>


<style scoped>
@media (max-width: 768px) {
  .el-progress {
    display: none;
  }
}
</style>
